﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">In this demo, you can reorder the ListBox items by dragging a list item and dropping it above or below another item.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
  </head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha"
		        ];

            // Create a jqxListBox
            $("#listBoxA").jqxListBox({ allowDrop: true, allowDrag: true, source: data,  width: 200, height: 250});
        });
    </script>
    <div id="listBoxA">
    </div>
</body>
</html>
